<template>
  <div class="assign-list-dimension" style="overflow-y: auto;">
    <span v-show="assignmentId == null" class="list-empty-text">{{ hintText }}</span>
    <InnerPageTable ref="dataTable" :config="tableConfig" v-show="assignmentId != null">
      <div slot="table-bar">
        <RPButton
          optType="common"
          :text="$t('module.dataPermission.assignData')"
          @click="assignData"
          :disabled="assignmentId == null"
        />
        <RPButton optType="delete" @click="deleted()" />
        <Input
          v-model="searchForm.nameOrCode"
          :placeholder="$t('module.dataPermission.warning.nameorcode')"
          class="input-search"
          icon="ios-search"
          small
          @on-enter="onSearch"
          @on-click="onSearch"
        />
      </div>
    </InnerPageTable>
  </div>
</template>
<script>
import locales from "./locales.js";
import SelectListDimension from "./SelectListDimension.vue";
import { dimensionDataColumns } from "./columns.js";
import dataPermissionAPI from "@/api/dataPermissionAPI.js";
import { CONTROL_LEVEL_ORG, CONTROL_LEVEL_ROLE, CONTROL_LEVEL_USER } from "./const.js";

export default {
  name: "AssignListDimension",
  mixins: [locales],
  props: {
    tenantCode: { type: String, required: true },
    assignmentId: String,
    dimensionCode: String,
    controlLevel: {
      type: Number,
      default() {
        return 0;
      }
    }
  },
  data() {
    return {
      selectedIds: [],
      ids: [],
      searchForm: {
        tenantCode: this.tenantCode,
        assignmentId: this.assignmentId,
        dimensionCode: this.dimensionCode,
        dimensionDataCode: "",
        nameOrCode: ""
      },
      isRowChange: false,
      hintText: ""
    };
  },
  computed: {
    tableConfig() {
      return {
        loadDataFn: ({ responseProcess, param }) => {
          dataPermissionAPI.queryAssignedListDimensionData(param).then(data => {
            responseProcess(data);
          });
        },
        initParam: this.searchForm,
        columnsFn: dimensionDataColumns.bind(this),
        autoFirst: false,
        rowClassNameFn: this.rowClassName // 自定义行样式
      };
    }
  },
  created: function() {
    this.initHint();
  },
  mounted() {
    this.$table = this.$refs["dataTable"];
  },
  methods: {
    initHint() {
      if (this.controlLevel == CONTROL_LEVEL_ORG) {
        this.hintText = this.$t("module.dataPermission.warning.hintSelectOrg");
      } else if (this.controlLevel == CONTROL_LEVEL_ROLE) {
        this.hintText = this.$t("module.dataPermission.warning.hintSelectRole");
      } else if (this.controlLevel == CONTROL_LEVEL_USER) {
        this.hintText = this.$t("module.dataPermission.warning.hintSelectUser");
      }
    },
    // 自定义行样式
    rowClassName(row) {
      //enabled:1-有效，0-无效
      if (row.enabled == 0) {
        return "tableDisableStyle";
      }
    },
    search(page) {
      this.$table.load(this.searchForm, page);
    },
    assignData() {
      new this.$pageModal(
        SelectListDimension,
        {
          props: {
            tenantCode: this.tenantCode,
            assignmentId: this.assignmentId,
            dimensionCode: this.dimensionCode
          }
        },
        data => {
          if (data) {
            this.search();
          }
        }
      );
    },
    deleted(id) {
      let selectedIds;
      if (id) {
        selectedIds = [id];
      } else {
        selectedIds = this.getSelectedIds();
        if (selectedIds.length == 0) {
          this.$message.error(this.$t("module.dataPermission.warning.selectData"));
          return;
        }
      }
      new $confirm(this.$t("module.dataPermission.warning.confirmDeleteAssignedData"), this).then(() => {
        dataPermissionAPI.deleteAssignedListDimensionData(selectedIds).then(res => {
          this.$message.success({
            content: this.$t("module.orgManage.deleteSuccess"),
            duration: 3
          });
          this.search();
        });
      });
    },
    getSelectedIds() {
      let list = this.$refs["dataTable"].getSelectioned() || [];
      let ids = [];
      for (let { id } of list) {
        ids.push(id);
      }
      return ids;
    },
    onSearch() {
      this.search();
    }
  },
  watch: {
    assignmentId(newVal, oldVal) {
      this.searchForm.assignmentId = newVal;
      if (newVal) {
        this.search(1);
      }
    }
  },
  directives: {}
};
</script>
<style lang="less">
.assign-list-dimension {
  height: 100%;
  .input-search {
    float: right;
    width: 200px;
    input {
      color: #515a6e;
    }
  }
}
.list-empty-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #909399;
  font-size: 14px;
}
</style>
